<template>
  <div id="bankRequireList">


    <div class="flex_head">
      <div class="solid"></div>
      <div class="item_two">
        <h3 >用户提交申请银行卡列表</h3>
      </div>
    </div>
      <el-table :data="tableData" border style="width: 100%" v-loading="loading">
        <el-table-column prop="username" label="用户名">
        </el-table-column>
        <el-table-column prop="cardBank" label="银行名称">
        </el-table-column>
        <el-table-column prop="cardNo" label="银行卡号">
        </el-table-column>
        <el-table-column prop="cardPhone" label="预留手机号">
        </el-table-column>
        <el-table-column prop="cardPerson" label="持卡人姓名">
        </el-table-column>
        <el-table-column prop="createTime" label="提交日期">
        </el-table-column>
        <el-table-column prop="status" label="状态">
        </el-table-column>
        <!--<el-table-column  label="是否撤销" >-->
        <!--<template slot-scope='scope'>-->
        <!--<el-button type="primary" size= 'mini' @click="allowRevise(scope.row.id)">同意</el-button>-->
        <!--<el-button type="primary" size= 'mini' @click ='notAllow(scope.row.id)'>不同意</el-button>-->
        <!--</template>-->
        <!--</el-table-column>-->
        <el-table-column prop="status" label="是否同意">
          <template slot-scope='scope'>
            <el-button type="primary" size='mini' @click="allowRevise(scope.row.id)">同意</el-button>
            <el-button type="primary" size='mini' @click='notAllow(scope.row.id)'>不同意</el-button>
          </template>

        </el-table-column>
      </el-table>

    <div class="block" style="padding: 15px;text-align: right">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleChange"
        :current-page="pageNumber"
        :page-sizes="[8, 10, 13, 15]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    </div>

</template>

<script>
  import dateformat from 'dateformat'

  export default {
    data () {
      return {
        pageSize: 10,
        pageNumber: 1,
        total: 1,
        tableData: [],
        loading: false
      }
    },
    created () {
      this.getBankList()
    },
    methods: {
      getBankList () {
        this.loading = true
        let params = {
          pageSize: this.pageSize,
          pageNumber: this.pageNumber
        }
        this.$api.getchangeCardList(params).then(res => {

          if (res.code === '000000') {
            this.loading = false
            this.tableData = res.data.list
            this.total = res.data.totalRow

            this.tableData.forEach(item => {
              if (item.createTime) {
                let date = new Date(item.createTime)
                item.createTime = dateformat(date, 'yyyy-mm-dd HH:MM')
              }
              switch (item.status) {
                case 9:
                  item.status = '成功'
                  break
                case 10:
                  item.status = '失败'
                  break
                case 11:
                  item.status = '待审核'
                  break
                case 12:
                  item.status = '已撤销'
                  break
              }
            })
            this.$message({
              type: 'success',
              message: '获取用户提交银行卡列表成功'
            })
          }
        })
      },
      allowRevise (id) {
        this.$api.allowChange(id).then(res => {
          if (res.code === '000000') {
            this.$message({
              type: 'success',
              message: '同意修改成功'
            })
            this.getBankList()
          }
        })
      },
      notAllow (id) {
        this.$api.notAllowChange(id).then(res => {
          if (res.code === '000000') {
            console.log(res.data)
            this.$message({
              type: 'success',
              message: '拒绝修改成功'
            })
            this.getBankList()
          }
        })
      },
      handleChange (val) {
        this.pageNumber = val
        this.getBankList()
      },
      handleSizeChange (val) {
        this.pageSize = val
        this.getBankList()
      }
    }
  }
</script>

<style lang="less">
  #bankRequireList {
    th {
      text-align: center;
    }
    .el-button--mini{
      padding: 5px;
    }
  }
</style>
